<template>
  <div class="hello">
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh" success-text="刷新成功">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <div class="imges">
          <van-swipe :autoplay="3000">
            <van-swipe-item
              v-for="(image, index) in images"
              :key="index"
              @click="mdetail(image.musicId)"
            >
              <img v-lazy="image.carouselUrl" />
            </van-swipe-item>
          </van-swipe>
        </div>
        <!-- <div>
          <van-grid :gutter="10">
            <van-grid-item icon="photo-o" text="文字" />
            <van-grid-item icon="photo-o" text="文字" />
            <van-grid-item icon="photo-o" text="文字" />
            <van-grid-item icon="photo-o" text="文字" />
            <van-grid-item icon="photo-o" text="文字" />
            <van-grid-item icon="photo-o" text="文字" />
            <van-grid-item icon="photo-o" text="文字" />
            <van-grid-item icon="photo-o" text="文字" />
          </van-grid>
        </div> -->
        <div class="content">
          <div v-for="(v, index) in list" :key="index" class="d1">
            <img v-lazy="v.avaUrl" @click="detail(v.id)" class="img" />
            <div class="d2">
              <p>{{ v.name }}</p>
              <p>{{ v.phone }}</p>
              <!-- <van-icon name="cart-o" color="#1989fa" /> -->
              <div>
                <mt-button class="mt_btn" @click="add(v)">
                  <img src="../assets/购物车 (1).png" slot="icon" class="img2" />
                </mt-button>
              </div>
            </div>
          </div>
        </div>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import url from "../tools/url";
export default {
  name: "HelloWorld",
  data() {
    return {
      list: [],
      loading: false,
      finished: false,
      pageNo: 1,
      isLoading: false,
      images: [],
    };
  },
  methods: {
    //
    mdetail(id) {
      this.$router.push({
        query: { id: id },
        path: "/mdetail",
      });
    },
    //上滑加载
    onRefresh() {
      var token = sessionStorage.getItem("token");
      var str = `token=${token}&pageNo=${this.pageNo}&pageSize=10`;
      this.axios.post(url.GET_LIST, str).then((res) => {
        if (res.data.code == 200) {
          this.isLoading = false;
          res.data.data.list.forEach((item, index, arr) => {
            item.count = 1;
            item.ischeck = false;
            item.price = 1000;
          });
          this.list = res.data.data.list.concat(this.list);
          this.pageNo++;
          if (res.data.data.isLastPage) {
            this.finished = true;
          }
        }
      });
    },

    add(v) {
      this.$store.commit("addp", v);
    },

    detail(v) {
      this.$router.push({
        path: "/Detail",
        query: {
          id: v,
        },
      }); // 路由传值
    },

    // 下拉刷新
    onLoad() {
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      var token = sessionStorage.getItem("token");
      var str = `token=${token}&pageNo=${this.pageNo}&pageSize=10`;
      this.axios.post(url.GET_LIST, str).then((res) => {
        console.log(res);
        if (res.data.code == 200) {
          this.loading = false;
          res.data.data.list.forEach((elem, index, arr) => {
            elem.count = 1;
            elem.price = 2;
            elem.ischeck = false;
          });
          this.list = this.list.concat(res.data.data.list);
          if (res.data.data.isLastPage) {
            this.finished = true;
          }
          this.pageNo++;
        } else {
          this.$router.push("/Login");
        }
      });
    },
  },
  mounted() {
    var token = sessionStorage.getItem("token");
    this.axios.post(url.GET_FINDALL, `token=${token}`).then((res) => {
      console.log(res);
      if (res.data.code == 200) {
        this.images = res.data.data;
      } else {
        this.$router.push("/login");
      }
    });
  },
  computed: {},
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.content {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  margin-bottom: 60px;
}
.d1 {
  width: 45%;
  margin-top: 10px;
  border: 0px solid black;
}
.d2 {
  text-align: left;
  margin-top: 10px;
}
.img {
  width: 100%;
  border-radius: 15%;
}
.hello {
  text-align: center;
  margin-bottom: 60px;
}
.imges {
  margin-top: 40px;
}
.imges img {
  width: 90%;
  height: 150px;
}
.img2 {
  width: 35px;
  height: 30px;
}
.mt_btn {
  float: right;
  top: -40px;
  border-radius: 30%;
}
</style>
